<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <style>
    @font-face {
      font-family: "genshin";
      src: url('../fonts/9w6ve-4l668.ttf')
    }
    body {
      font-size:20px;
      width: 100%;
      margin: 0;
      padding: 0;
      font-family: "genshin";
    }
    .bg-img {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: url('http://unsplash.it/1200x800') center center no-repeat;
      background-size: cover;
    }

    .bg-img:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
      opacity: .6;
    }

    .box {
      overflow: auto; /* 显示滚动条 */
      margin: 20px 10px 10px;
      padding: 10px;
      /*background-color: rgba(255, 255, 255, 0.45);*/
      box-shadow: 0px 8px 32px rgba(31,38,135,0.47);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border-radius:10px;
      border:1px solid rgba(255,255,255,0.18);
      transition: all .3s ease-in-out;
      /*background:  linear-gradient(135deg,#7117ea,#ea6060);*/
      background-color: transparent;
      /*-webkit-background-clip: text;*/
      /*color: transparent;*/
      /*background-clip: text;*/
    }
    .box:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(31,38,135,.4);
    }
    .title, .footer{
      transition: all .3s ease-in-out;
    }
    .footer{
      margin: 10px 0 3px 0;
    }
    .footer span{
      margin: 10px;
      background: linear-gradient(135deg,#622774,#c53364);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      padding: 5px;
      border-radius: 5px;
      /*border:1px solid rgba(255,255,255,0.18);*/
    }
    .title span{
      /*box-shadow: 0px 8px 32px rgba(31,38,135,0.39);*/
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      /*background-color: rgba(154, 136, 140, 0.15);*/
      padding: 5px;
      border-radius: 5px;
      /*border:1px solid rgba(255,255,255,0.18);*/
      /*background: linear-gradient(135deg,#622774,#c53364);*/
      /*-webkit-background-clip: text;*/
      /*background-clip: text;*/
      /*color: transparent;*/
    }
    .title span{
      margin: 0;
      padding-top: 0px;
      /*display: inline-block;*/
      /*white-space: nowrap;*/
      font-size: 23px;
      min-width: 100px;
    }
    .footer span{
      font-size: 15px;
    }
    .footer:hover{
      transform: translateY(-5px);
    }
    .title:hover{
      transform: translateY(-5px);
    }
    img {
      float: left;
      margin-right: 10px;
    }
    .nick,.reply{
      color: #422256;
      display: inline-block;
      margin-top: 15px;
      font-weight: bold;
    }
    .reply:before{
      content: '';
      display: inline-block;
      width: 20px;
    }
  </style>
</head>
<body class="bg-img">
<div class="box">
  <div class="title" style="text-align: center;">
    <span style="font-weight: bold">{{@title}}</span>
  </div>
  {{@markdownHtml}}
  <p style="text-align:center;font-weight: bold">{{@footer}}</p>
</div>
<div class="footer" style="text-align: center">
  <span>Created By Yunzai-Bot {{@yunZaiVersion}} & Avocado-Plugin {{@pluginVersion}}</span>
</div>
</body>